<template>
  <view class="container" >
    <!-- 顶部导航栏 -->
<!--    <view class="header">
      <view class="header-left">
        <image class="logo" src="https://yeb.byjx.shop/profile/upload/2025/07/ed29b1539842cff7e07391cdbdca145a.png"></image>
        <text class="title">校园综合服务平台</text>
      </view>
      <view class="header-right">
        <image class="search-icon" src="/static/search.png"></image>
        <image class="user-icon" src="/static/user.png"></image>
      </view>
    </view> -->

    <!-- 轮播图 -->
    <view class="swiper-container">
      <u-swiper 
        :list="swiperList" 
        keyName="image" 
        showTitle 
        titleColor="#fff"
        titleBackground="rgba(0,0,0,0.3)"
        height="200"
        radius="8"
        @change="swiperChange"
        @click="swiperClick"
      ></u-swiper>
    </view>

    <!-- 服务分类 -->
    <view class="service-category">
      <view class="category-title">
        <text>服务分类</text>
      </view>
	<!--  <u-scroll-list>
		  <view class="scroll-list" style="flex-direction: row;">
			  <view class="scroll-list__goods-item" style="text-align: center; margin-right: 35rpx;" v-for="(item, index) in serviceCategories" :key="index" @click="navigateTo(item.url)">
			  			<image style="width: 150rpx;height: 150rpx;border-radius: 20rpx;" class="item-icon" mode="widthFix" :src="item.icon"></image>
			  			<text class="item-name">{{ item.name }}</text>
			  </view>
		
		  </view>
	  </u-scroll-list> -->
      <view class="category-grid">
        <view class="category-item" v-for="(item, index) in serviceCategories" :key="index" @click="navigateTo(item.url)">
          <image class="item-icon" mode="widthFix" :src="item.icon"></image>
          <text class="item-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 热门推荐 -->
    <view class="section hot-recommend" v-if="false">
      <view class="section-header">
        <text class="section-title">热门推荐</text>
        <text class="section-more" @click="goToMore('recommend')">更多 ></text>
      </view>
      <view class="recommend-grid">
        <view class="recommend-item" v-for="(item, index) in hotRecommendList" :key="index" @click="goToDetail(item.id, 'recommend')">
          <image class="item-image" :src="item.image||'/static/icons/zg.png'"></image>
          <text class="item-title">{{ item.name }}</text>
          <text class="item-desc">{{ item.description }}</text>
          <view class="item-tags">
            <text class="tag" v-for="(tag, idx) in item.tags" :key="idx">{{ tag }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 校园外卖 -->
    <view class="section campus-food" v-if="foodList.length>0">
      <view class="section-header">
        <text class="section-title">校园外卖</text>
        <text class="section-more" @click="goToMore('food')">更多 ></text>
      </view>
      <scroll-view class="food-scroll" scroll-x>
        <view class="food-item" v-for="(item, index) in foodList" :key="index" @click="goToDetail(item.id, 'food')">
          <image class="food-image" :src="item.image||'/static/icons/zg.png'"></image>
          <view class="food-info">
            <text class="food-name">{{ item.name }}</text>
            <text class="food-desc">{{ item.description }}</text>
            <view class="food-price">
              <text class="price">￥{{ item.monthly_fee }}</text>
              <text class="old-price" v-if="item.oldPrice">￥{{ item.oldPrice }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 校园兼职 -->
    <view class="section campus-job" v-if="false">
      <view class="section-header">
        <text class="section-title">校园兼职</text>
        <text class="section-more" @click="goToMore('job')">更多 ></text>
      </view>
      <view class="job-list">
        <view class="job-item" v-for="(item, index) in jobList" :key="index" @click="goToDetail(item.id, 'job')">
          <image class="job-logo" :src="item.logo"></image>
          <view class="job-info">
            <text class="job-title">{{ item.title }}</text>
            <view class="job-tags">
              <text class="tag">{{ item.type }}</text>
              <text class="tag">{{ item.location }}</text>
            </view>
            <text class="job-salary">{{ item.salary }}</text>
          </view>
          <image class="job-arrow" src="/static/arrow-right.png"></image>
        </view>
      </view>
    </view>
	<BottomNav currentPage="discover"></BottomNav>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      swiperList: [],
      
      // 服务分类数据
      serviceCategories: [
        // { name: '驾校报名', icon: 'https://yeb.byjx.shop/profile/upload/2025/07/1837a2f7295ae5e0f391507eb47e8994.png', url: '/pages/service/driving/driving' },
        // { name: '校园外卖', icon: 'https://yeb.byjx.shop/profile/upload/2025/07/b725b67ab664e1628259efc148a39049.png', url: '/pagesA/food' },
        { name: '专升本', icon: 'https://yeb.byjx.shop/profile/upload/2025/07/806a142a8cbb8c285453bfdaae73303f.png', url: '/pages/service/exam/exam' },
        { name: '校园兼职', icon: 'https://yeb.byjx.shop/profile/upload/2025/07/e194044ecd8addcc7973fc3c698ef23c.png', url: '/pagesA/job' },
        { name: '移动业务', icon: 'https://yeb.byjx.shop/profile/upload/2025/07/af04b5cd57ca5b34862f77bc2e9a0fda.png', url: '/pages/service/mobile/mobile' },
        // { name: '二手商城', icon: 'https://yeb.byjx.shop/profile/upload/2025/07/d3293de3c86d68473a56eab2756b024b.png', url: '/pages/service/telecom/telecom' },
		// { name: '发布跑腿', icon: 'https://yeb.byjx.shop/profile/upload/2025/07/e7eb7a6e6ebfb35818ec1cc4bb8bbe27.png', url: '/pagesA/publish' },
		{ name: '跑腿接单', icon: 'https://yeb.byjx.shop/profile/upload/2025/07/f98d7088f2bf98194eb52fdd675eeb07.png', url: '/pagesA/courier' }
      ],
      
      // 热门推荐数据
      hotRecommendList: [
        {
          id: 1,
          image: '/static/recommend1.jpg',
          title: '校园驾校特惠套餐',
          desc: '学生专享5折优惠，快速拿证',
          tags: ['限时优惠', '通过率高']
        },
        {
          id: 2,
          image: '/static/recommend2.jpg',
          title: '专升本冲刺班',
          desc: '名师授课，98%通过率',
          tags: ['小班教学', '押题精准']
        },
        {
          id: 3,
          image: '/static/recommend3.jpg',
          title: '校园特惠套餐',
          desc: '30元50GB流量，校园专属',
          tags: ['流量多', '价格低']
        }
      ],
      
      // 校园外卖数据
      foodList: [],
      
      // 校园兼职数据
      jobList: [
        {
          id: 1,
          logo: '/static/logo1.png',
          title: '图书馆助理',
          type: '长期兼职',
          location: '图书馆',
          salary: '15元/小时'
        },
        {
          id: 2,
          logo: '/static/logo2.png',
          title: '快递分拣员',
          type: '日结兼职',
          location: '快递站',
          salary: '18元/小时'
        },
        {
          id: 3,
          logo: '/static/logo3.png',
          title: '英语家教',
          type: '一对一',
          location: '线上',
          salary: '80元/小时'
        }
      ]
    }
  },
  onLoad() {
  	this.getLUNbo()
	this.getMobilePlan()
  },
  methods: {
	async getMobilePlan(){
		const res = await this.$api.get('/MobilePlan/getlist','',true)
		if(res.data.code === 200) {
			this.hotRecommendList = res.data.data
		}
	},
	async getLUNbo(){
		const res = await this.$api.get('/banner/index')
		console.log(res)
		if(res.data.code === 200) {
			this.swiperList = res.data.data.data
		}
	},
    // 轮播图事件
    swiperChange(e) {
      console.log('swiper changed', e);
    },
    swiperClick(e) {
      console.log('swiper clicked', e);
    },
    
    // 导航跳转
    navigateTo(url) {
      uni.navigateTo({ url:url });
    },
    
    // 查看详情
    goToDetail(id, type) {
      let url = '';
      switch(type) {
        case 'recommend':
          url = `/pagesA/recommend?id=${id}`;
          break;
        case 'food':
          url = `/pages/detail/food?id=${id}`;
          break;
        case 'job':
          url = `/pages/detail/job?id=${id}`;
          break;
      }
      uni.navigateTo({ url });
    },
    
    // 查看更多
    goToMore(type) {
      let url = '';
      switch(type) {
        case 'recommend':
          url = '/pages/list/recommend';
          break;
        case 'food':
          url = '/pages/list/food';
          break;
        case 'job':
          url = '/pages/list/job';
          break;
      }
      uni.navigateTo({ url });
    }
  }
}
</script>

<style lang="scss" scoped>
	 .scroll-list {
	    @include flex(column);
	
	    &__goods-item {
	      margin-right: 20px;
	
	      &__image {
	        width: 60px;
	        height: 60px;
	        border-radius: 4px;
	      }
	
	      &__text {
	        color: #f56c6c;
	        text-align: center;
	        font-size: 12px;
	        margin-top: 5px;
	      }
	    }
	
	    &__show-more {
	      background-color: #fff0f0;
	      border-radius: 3px;
	      padding: 3px 6px;
	      @include flex(column);
	      align-items: center;
	
	      &__text {
	        font-size: 12px;
	        width: 12px;
	        color: #f56c6c;
	        line-height: 16px;
	      }
	    }
	  }
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 100rpx;
}

/* 头部导航 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 24rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .header-left {
    display: flex;
    align-items: center;
    
    .logo {
      width: 72rpx;
      height: 72rpx;
      margin-right: 16rpx;
	  border-radius: 10rpx;
    }
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    
    .search-icon, .user-icon {
      width: 48rpx;
      height: 48rpx;
      margin-left: 32rpx;
    }
  }
}

/* 轮播图 */
.swiper-container {
  padding: 24rpx;
}

/* 服务分类 */
.service-category {
  // background-color: #fff;
  padding: 24rpx 0;
  padding-bottom: 100px;
  .category-title {
    padding: 0 24rpx 24rpx;
    text-align: center;
    
    text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      position: relative;
      
      &::before, &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 60rpx;
        height: 2rpx;
        background-color: #ddd;
      }
      
      &::before {
        left: -72rpx;
      }
      
      &::after {
        right: -72rpx;
      }
    }
  }
  
  .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24rpx 0;
    
    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .item-icon {
        width: 150rpx;
        height: 150rpx;
        margin-bottom: 12rpx;
		border-radius: 20rpx;
      }
      
      .item-name {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

/* 通用模块样式 */
.section {
  background-color: #fff;
  margin: 24rpx 0;
  padding: 24rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .section-more {
      font-size: 28rpx;
      color: #999;
    }
  }
}

/* 热门推荐 */
.hot-recommend {
  .recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;
    
    .recommend-item {
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      .item-image {
        width: 100%;
        height: 240rpx;
      }
      
      .item-title {
        display: block;
        padding: 16rpx 16rpx 8rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .item-desc {
        display: block;
        padding: 0 16rpx 12rpx;
        font-size: 24rpx;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .item-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8rpx;
        padding: 0 16rpx 16rpx;
        
        .tag {
          font-size: 20rpx;
          color: #ff6600;
          background-color: #fff0e6;
          padding: 4rpx 8rpx;
          border-radius: 8rpx;
        }
      }
    }
  }
}

/* 校园外卖 */
.campus-food {
  .food-scroll {
    white-space: nowrap;
    padding-bottom: 16rpx;
    
    .food-item {
      display: inline-block;
      width: 320rpx;
      margin-right: 24rpx;
      background-color: #fff;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      .food-image {
        width: 100%;
        height: 200rpx;
        border-radius: 16rpx 16rpx 0 0;
      }
      
      .food-info {
        padding: 16rpx;
        
        .food-name {
          display: block;
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .food-desc {
          display: block;
          font-size: 24rpx;
          color: #666;
          margin-bottom: 12rpx;
        }
        
        .food-price {
          display: flex;
          align-items: center;
          
          .price {
            font-size: 32rpx;
            font-weight: bold;
            color: #ff6600;
            margin-right: 12rpx;
          }
          
          .old-price {
            font-size: 24rpx;
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}

/* 校园兼职 */
.campus-job {
  .job-list {
    .job-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #f5f5f5;
      
      .job-logo {
        width: 100rpx;
        height: 100rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
      }
      
      .job-info {
        flex: 1;
        
        .job-title {
          display: block;
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 12rpx;
        }
        
        .job-tags {
          display: flex;
          gap: 12rpx;
          margin-bottom: 12rpx;
          
          .tag {
            font-size: 22rpx;
            color: #666;
            background-color: #f5f5f5;
            padding: 4rpx 12rpx;
            border-radius: 16rpx;
          }
        }
        
        .job-salary {
          font-size: 28rpx;
          font-weight: bold;
          color: #ff6600;
        }
      }
      
      .job-arrow {
        width: 24rpx;
        height: 24rpx;
        margin-left: 20rpx;
      }
    }
  }
}
</style>